<template>
  <div class="wode">
    <div class="wodeone">
      <div class="wode1"></div>
      <span>点击登录</span>
    </div>
    <div class="wodetwo">
      <div class="wodetwo1">
        <span>0</span>
        <span>商品收藏</span>
      </div>
      <div class="wodetwo1">
        <span>0</span>
        <span>浏览记录</span>
      </div>
      <div class="wodetwo1">
        <span>0</span>
        <span>优惠券</span>
      </div>
    </div>
    <div class="wodethree">
      <span>线上订单</span>
      <span @click="fun">门店订单</span>
      <van-grid style="width: 350px; margin: 0 auto" :column-num="5">
        <van-grid-item
          icon="paid"
          text="待付款"
          style="height: 80px; border-radius: 0 0 10px 0"
        />
        <van-grid-item icon="gift-o" text="待发货" style="height: 80px" />
        <van-grid-item
          icon="shop-collect-o"
          text="待提货"
          style="height: 80px"
        />
        <van-grid-item icon="refund-o" text="退款/售后" style="height: 80px" />
        <van-grid-item
          icon="todo-list-o"
          text="全部订单"
          style="width: 50px; height: 80px"
        />
      </van-grid>
    </div>
    <div class="wodefour">
      <van-grid square style="width: 350px; margin: 0 auto;border-radius: 10px;">
        <van-grid-item
          v-for="value in arr"
          :key="value"
          :icon="value.pic"
          :text="value.msg"
        />
      </van-grid>
    </div>
    <div class="wodefive">
        <span>助力海南自贸港建设</span>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Vue from "vue";
import { Grid, GridItem } from "vant";

Vue.use(Grid);
Vue.use(GridItem);
import Footer from "../../../../components/dl/home/Footer.vue";
export default {
  methods: {
    fun() {
      //方法1:
      this.$router.push("/Xinxi");
    },
  },
    data(){
        return{
            arr:[
                {
                    pic:"vip-card-o",
                    msg:"中免会员"
                },
                {
                    pic:"balance-o",
                    msg:"额度查询"
                },
                {
                    pic:"comment-o",
                    msg:"购买人信息"
                },
                {
                    pic:"todo-list-o",
                    msg:"信息变更"
                },
                {
                    pic:"send-gift-o",
                    msg:"商户资质"
                },
                {
                    pic:"user-o",
                    msg:"提袋人信息"
                },
                {
                    pic:"upgrade",
                    msg:"购买须知"
                },
                {
                    pic:"shield-o",
                    msg:"帮助中心"
                },
            ]

        }
    },
  components: {
    Footer,
  },
};
</script>

<style scoped>
.wode {
  width: 375px;
  height: 667px;
  padding-top: 30px;
  background: url(https://m.cdfgsanya.com/wap/resources/images/user-bg@2x.9c893f04.png)
    no-repeat 0 0;
  background-size: 100% auto;
  background-color: #efeff5;
  background-position-y: -20px;
}
.wode > .wodeone {
  display: flex;
  align-items: center;
  /* margin-top: 30px; */
  margin-left: 20px;
}
.wode > .wodeone > .wode1 {
  width: 60px;
  height: 60px;
  background-color: gainsboro;
  border-radius: 30px;
  margin-right: 5px;
}
.wode > .wodeone > span {
  font-size: 14px;
}
.wodetwo {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}
.wodetwo > .wodetwo1 {
  text-align: center;
}
.wodetwo > .wodetwo1 > span {
  display: block;
  border-right: 1px dashed gray;
  width: 125px;
}
.wodetwo > .wodetwo1 > span:nth-child(2) {
  font-size: 12px;
  color: gray;
}
.wodethree {
  width: 100%;
  height: 80px;
  text-align: center;
}
.wodethree > span {
  width: 175px;
  height: 35px;
  background-color: white;
  text-align: center;
  display: inline-block;
  border-radius: 10px 10px 0 0;
  line-height: 35px;
  font-size: 12px;
  margin-top: 15px;
}
.wodethree > span:nth-child(1){
  font-weight: 700;
}
.wodethree > span:nth-child(2){
  background-color: gainsboro;
}
.wodefour{
    margin-top: 70px;
    width: 100%;
}
.wodefive{
    width: 375px;
    text-align: center;
    font-size: 20px;
    color: red;
    font-weight: 700;
}
</style>